<template>
	<div class="header clear">
		<ul>
			<li v-for="item in menus">
				<router-link :to="item.path">{{item.name}}</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	import { mapState, mapMutations, mapActions } from 'vuex'
	import router from 'vue-router'
	import store from '@/store'
	import $ from 'jquery'

	export default {
		name: 'header',
		data() {
			return {
				menus: [{
						name: "data1",
						path: "/data1"
					}, {
						name: "data2",
						path: "/data2"
					},
					{
						name: "data3",
						path: "/data3"
					},
					{
						name: "data4",
						path: "/data4"
					},
					{
						name: "data5",
						path: "/data5"
					}
				]
			}
		},
		computed: {},
		methods: {},
		mounted: function() {}
	}
</script>

<style>
	.header {
		background: #CCCCCC;
	}
	
	.header ul li {
		float: left;
		width: 20%;
		text-align: center;
	}
</style>